<script lang="ts" setup>
import { useMimoPlotForm } from './composables/useMimoPlotForm'
import { modulationModeOptions } from './composables/useDecodeTable'
import { toRef } from 'vue'

const props = defineProps<{ isPlotting: boolean; reportID: number }>()
const { formState, handleSubmit } = useMimoPlotForm(toRef(props, 'reportID'))
</script>

<template>
  <a-form
    :disabled="isPlotting"
    class="mx-auto max-w-lg"
    size="small"
    layout="vertical"
    @submit-success="handleSubmit"
    :model="formState"
  >
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item label="发射天线个数"><a-tag color="green">2</a-tag></a-form-item>
      </a-col>
      <a-col :span="16">
        <a-form-item field="modulationMode" label="调制方式">
          <a-radio-group :options="modulationModeOptions" v-model="formState.modulationMode" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="receiveAntennas" label="接收天线个数">
          <a-input-number v-model="formState.receiveAntennas" :min="1" mode="button" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="counts" label="运行次数">
          <a-input-number
            v-model="formState.counts"
            :step="1"
            :min="1000"
            :max="100000"
            mode="button"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item field="noiseRate" label="信噪比">
          <a-input-number v-model="formState.noiseRate" :max="30" :min="0" mode="button" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="提交">
          <a-button html-type="submit" size="small" type="primary" long>执行实验</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
